<template>
  <div class="cityMain">
    <uv-picker ref="picker" @change="change" keyName="name" :columns="addressList" @confirm="confirm"></uv-picker>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();
const emit = defineEmits(["fatherMethods"]);

let current = ref([0, 0, 0]);
let provinces = ref([]);

onMounted(() => {
  getInfo();
});

let open = () => {
  instance.refs.picker.open();
};

let addressList = computed(() => {
  return [provinces.value, citys.value, areas.value];
});

let citys = computed(() => {
  if (!provinces.value.length) return;
  let city = provinces.value[current.value[0]].child;
  return city;
});

let areas = computed(() => {
  if (!provinces.value.length) return;
  if (!citys.value.length) return;
  return citys.value[current.value[1]].child;
});

async function getInfo() {
  provinces.value = await proxy.$shopApis.cityList();
}

function change(e) {
  let { indexs } = e;
  current.value = indexs;
}

function confirm(e) {
  emit("fatherMethods", e.value);
}

defineExpose({ open });
</script>



<style lang="scss" scoped>
.container {
}
</style>